<template>
	<view>
		<!--绑定点击事件-->
		<button @tap="nearby_search">搜索周边KFC</button>
		<!--地图容器-->
		<map id="myMap"
		   markers="markers"
		   style="width:100%;height:300px;"
		   longitude="116.313972"
		   latitude="39.980014" scale='16'>
		</map>
	</view>
</template>

<script>
	// 引入SDK核心类
	var QQMapWX = require('../../qqmap-wx-jssdk1.1/qqmap-wx-jssdk.js');
	 
	// 实例化API核心类
	var qqmapsdk = new QQMapWX({
	  key: '4UGBZ-ZC5RG-XHTQY-QXOEB-PD7G7-GVBGN' // 必填
	});
	export default {
		data() {
			return {
				longitude:'',//经度
				latitude:'',//纬度
			}
		},
		methods: {
			// 事件触发，调用接口
			nearby_search(){
			   var _this = this;
			   // 调用接口
			   qqmapsdk.search({
			      keyword: 'kfc',  //搜索关键词
			      location: '39.980014,116.313972',  //设置周边搜索中心点
			      success: function (res) { //搜索成功后的回调
			        var mks = []
			        for (var i = 0; i < res.data.length; i++) {
			          mks.push({ // 获取返回结果，放到mks数组中
			            title: res.data[i].title,
			            id: res.data[i].id,
			            latitude: res.data[i].location.lat,
			            longitude: res.data[i].location.lng,
			            iconPath: "/resources/my_marker.png", //图标路径
			            width: 20,
			            height: 20
			          })
			        }
			        
			          markers: mks
			    
			      },
			      fail: function (res) {
			        console.log(res);
			      },
			      complete: function (res){
			        console.log(59,res);
					this.longitude=res.data[0].location.lng//经度
					this.latitude=res.data[0].location.lat//经度
			      }
			  });
			}
			
		}
	}
</script>

<style>

</style>
